<template>
    <div class="app">
        <!-- 这里是nav -->
        <my-nav></my-nav>
        <!-- 这里是头部 -->
        <my-head></my-head>
        <div class="body" style="width: 70%;float:right;margin-top:100px;margin-right:105px; overflow: auto;">
            <div class="search">
                <div class="title" style="margin-top: 10px;margin-left:20px">
                    <div class="search-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                            class="bi bi-search" viewBox="0 0 16 16">
                            <path
                                d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
                        </svg>
                    </div>
                    <div class="search-text" style="font-weight:bold;">搜索订单</div>
                </div>
                <input style="margin-left: 300px;" type="text" placeholder="输入订单ID"
                    class="input input-bordered input-success w-full max-w-xs" v-model="orderId" />

                <button class="btn btn-info" style="margin-left: 200px;" @click="getOrderByID">查询订单</button>
            </div>

            <div class="overflow-y-auto w-full" style="height: 500px;">
                <table class="table w-full">
                    <thead>
                        <tr>
                            <th>
                                <label>
                                    <input type="checkbox" class="checkbox" v-model="selectAll" @change="toggleAllItems" />
                                </label>
                            </th>
                            <th>订单ID</th>
                            <th>商家账户</th>
                            <th>用户账号</th>
                            <th>总金额</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in items" :key="item.orderId">
                            <td>
                                <label>
                                    <input type="checkbox" class="checkbox" v-model="item.checked" />
                                </label>
                            </td>
                            <td>{{ item.orderId }}</td>
                            <td>
                                <div class="flex items-center space-x-3">
                                    <div class="avatar">
                                        <div class="mask mask-squircle w-12 h-12">
                                            <img :src="item.supplierPic" alt="Avatar Tailwind CSS Component" />
                                        </div>
                                    </div>
                                    <div>
                                        <div class="font-bold">{{ item.supplier }}</div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="flex items-center space-x-3">
                                    <div class="avatar">
                                        <div class="mask mask-squircle w-12 h-12">
                                            <img :src="item.userPic" alt="Avatar Tailwind CSS Component" />
                                        </div>
                                    </div>
                                    <div>
                                        <div class="font-bold">{{ item.user }}</div>
                                    </div>
                                </div>
                            </td>
                            <td>{{ item.totalMoney }}</td>
                            <td>{{ item.status }}</td>
                            <td>
                                <button class="btn btn-ghost btn-xs" for="my-modal-6"
                                    @click="() => $router.push('/order/details/' + item.orderId).catch(err => { })">详情</button>
                            </td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <th>
                                <label>
                                    <input type="checkbox" class="checkbox" v-model="selectAll" @change="toggleAllItems" />
                                </label>
                            </th>
                            <th>订单ID</th>
                            <th>商家账户</th>
                            <th>用户账号</th>
                            <th>总金额</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </tfoot>
                </table>
            </div>


            <div class="btn-group">
                <div class="btn-container">
                    <button v-for="button in buttons" :key="button" class="btn btn-active" @click="changePage(button)">{{
                        button }}</button>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
import MyHead from "../../components/head.vue"
import MyNav from "../../components/nav.vue"
export default {
    name: "order_list",
    data() {
        return {
            selectAll: false,
            items: [],
            orders: [],
            orderId: "",
            buttons: [] // 替换为您的按钮数据
        }
    },
    components: {
        'my-head': MyHead,
        'my-nav': MyNav,
    },
    mounted() {
        this.getOrderList()
    },
    methods: {
        toggleAllItems() {
            this.items.forEach(item => {
                item.checked = this.selectAll;
            });
        },
        //获取订单列表
        getOrderList() {
            this.$http.post('/admin/getOrderList', {},
                {
                    headers: {
                        Authorization: "Bearer " + localStorage.getItem("admin_token") //带着token去请求
                    },
                }).then(res => {
                    console.log(res);
                    if (res.data.code == 401) { //代码登陆已经过期了
                        this.$router.push("/")
                        return
                    }
                    this.orders = res.data.data

                    // 计算页数
                    let num = Math.floor(this.orders.length / 10);
                    if (this.orders.length % 10 !== 0) {
                        num += 1;
                    }

                    // 重置按钮数组
                    this.buttons = [];
                    for (let index = 1; index <= num; index++) {
                        //将index 添加到buttons里
                        this.buttons.push(index)
                    }

                    this.items = this.orders.slice(0, 10)
                }).catch((res) => {
                    console.log(res);
                })
        },
        //实现切换数据页码
        changePage(index) {
            this.items = this.orders.slice((index - 1) * 10, index * 10)
        },
        //实现通过订单ID查询订单
        getOrderByID() {
            this.$http.post("/admin/getOrderByID", {
                "orderId": this.orderId
            }, {
                headers: {
                    Authorization: "Bearer " + localStorage.getItem("admin_token") //带着token去请求
                },
            }).then((res) => {
                console.log(res);
                if (res.data.code == 401) { //代码登陆已经过期了
                    this.$router.push("/")
                    return
                }

                this.items = []
                //将res.data.data添加到orders里面
                this.items.push(res.data.data)

                // 重置按钮数组
                this.buttons = [];
            }).catch((res) => {
                console.log(res);
            })
        }
    },
}
</script>

<style scoped>
.search {
    border: 1px solid #fff;
    border-radius: 4px;
    height: 120px;
    border: 2px solid #ECEEF4;
    margin-bottom: 20px;
}

.title {
    display: flex;
    align-items: center;
}

.search-icon {
    margin-right: 5px;
}

.btn-group {
    overflow-x: auto;
    justify-content: center;
    margin-left: 350px;
    margin-top: 20px;
}

.btn-container {
    display: flex;
    width: 200px;
}
</style>